<template>
  <div>
    <el-form ref="form" :rules="rules" :model="form" label-position="left" v-loading="loading">
      <!-- 基本信息 -->
      <div class="border">
        <h4>基本信息</h4>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label-width="120px" label="监测表流水号：" prop="monitorRecordNo" :error="errormsg1">
              <el-input :disabled="isHaveData" v-model="form.monitorRecordNo" placeholder="请输入监测表流水号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="医院编号：" prop="hospitalNo">
              <el-input disabled v-model="form.hospitalNo" placeholder="请输入医院编号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="监测医院：" prop="hospitalName">
              <el-input disabled v-model="form.hospitalName" placeholder="请输入监测医院"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="分中心：" prop="branchCenter">
              <el-input disabled v-model="form.branchCenter" placeholder="请输入分中心"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label-width="120px" label="患者姓名缩写：" prop="patientNameAcronym">
              <el-input disabled v-model="form.patientNameAcronym" placeholder="请输入患者姓名缩写"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="住院号：" prop="patientNo">
              <el-input disabled v-model="form.patientNo" placeholder="请输入住院号"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="入组日期：" prop="inputFormDate">
              <el-date-picker style="width: 100%" :disabled="disabled" clearable v-model="form.inputFormDate"
                              type="date" value-format="yyyy-MM-dd" placeholder="请选择入组日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="80px" label="天气：" prop="weather">
              <el-input :disabled="disabled" v-model="form.weather" placeholder="请输入天气"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label-width="120px" label="温度：" prop="temperature">
              <div class="df">
                <el-input :disabled="disabled" v-model="form.temperature" placeholder="请输入温度"/>
                ℃
              </div>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <!-- 人口学信息 -->
      <div class="border">
        <h4>人口学信息</h4>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label-width="100px" label="性别：" prop="patientSex">
              <el-select :disabled="disabled" v-model="form.patientSex" placeholder="请选择性别" style="width: 100%">
                <el-option label="男" value="1"></el-option>
                <el-option label="女" value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="出生日期：" prop="birthdate">
              <el-date-picker :disabled="disabled" style="width: 100%" clearable v-model="form.birthdate" type="date"
                              value-format="yyyy-MM-dd" placeholder="请选择出生日期"
              />
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="联系电话：" prop="phoneNo">
              <el-input :disabled="disabled" v-model="form.phoneNo" placeholder="请输入联系电话"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="身高(cm)：" prop="patientHeight">
              <el-input :disabled="disabled" v-model="form.patientHeight" placeholder="请输入身高(cm)"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-col :span="6">
            <el-form-item label-width="100px" label="体重(kg)：" prop="patientWeight">
              <el-input :disabled="disabled" v-model="form.patientWeight" placeholder="请输入体重(kg)"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label-width="100px" label="民族：" prop="nation">
              <el-input :disabled="disabled" v-model="form.nation" placeholder="请输入民族"/>
            </el-form-item>
          </el-col>
        </el-row>
      </div>

      <!-- 个人过敏史 -->
      <div class="border">
        <!-- <h4>个人过敏史</h4> -->
        <el-form-item label="个人过敏史" prop="isHaveAllergy">
          <el-radio-group :disabled="disabled" v-model="form.isHaveAllergy">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
        </el-form-item>
        <div v-show="form.isHaveAllergy == 1" class="buliangshihao">
          <el-form-item label="过敏原" prop="allergySource">
            <el-checkbox-group :disabled="disabled" v-model="form.allergySource" style="display: flex; flex-wrap: wrap">
              <div class="mr10" v-for="item in guominyuan" :key="item.value">
                <el-checkbox class="mr10" :label="item.value">{{
                    item.label
                  }}
                </el-checkbox>
                <el-input :disabled="disabled" v-if="item.value === '1'" style="width: 200px" v-model="form.allergyFood"
                          placeholder="请输入过敏原食物"
                />
                <el-input :disabled="disabled" v-else-if="item.value === '2'" style="width: 200px"
                          v-model="form.allergyDrug" placeholder="请输入过敏原药物"
                />
                <el-input :disabled="disabled" v-else-if="item.value === '3'" style="width: 200px"
                          v-model="form.allergyUnknown" placeholder="请输入不明原因过敏原"
                />
                <el-input :disabled="disabled" v-else-if="item.value === '4'" style="width: 200px"
                          v-model="form.allergyOther" placeholder="请输入其它过敏原"
                />
              </div>
            </el-checkbox-group>
          </el-form-item>
          <div class="r">
            <el-form-item label="过敏表现" prop="allergyShow" style="margin-right: 70px">
              <el-checkbox-group :disabled="disabled" v-model="form.allergyShow" style="display: flex">
                <div class="mr10" v-for="item in guominbiaoxian" :key="item.value">
                  <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
                </div>
              </el-checkbox-group>
            </el-form-item>
            <el-form-item label="" prop="allergyShowOther">
              <el-input :disabled="disabled" style="width: 200px" v-model="form.allergyShowOther" placeholder=""/>
            </el-form-item>
          </div>
        </div>
      </div>
      <!-- 过敏性疾病史 -->
      <div class="border">
        <el-form-item label="过敏性疾病史" prop="isHaveIllness">
          <el-radio-group :disabled="disabled" v-model="form.isHaveIllness">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="r" v-show="form.isHaveIllness == '1'">
          <el-form-item label="" prop="illnessShow">
            <el-checkbox-group :disabled="disabled" v-model="form.illnessShow" style="display: flex">
              <div class="mr10" v-for="item in guominxingjibingshi" :key="item.value">
                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
              </div>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="" prop="illnessShowOther">
            <el-input :disabled="disabled" style="width: 200px" v-model="form.illnessShowOther" placeholder=""/>
          </el-form-item>
        </div>
      </div>
      <!-- 家族过敏史 -->
      <div class="border">
        <el-form-item label="家族过敏史" prop="isHaveFamily">
          <el-radio-group :disabled="disabled" v-model="form.isHaveFamily">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="r" v-show="form.isHaveFamily == '1'">
          <el-form-item label="与本人关系父母" label-width="130px" prop="relationParent" style="margin-right: 20px">
            <el-radio-group :disabled="disabled" v-model="form.relationParent">
              <el-radio :label="'0'">无</el-radio>
              <el-radio :label="'1'">有</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="兄弟姐妹" label-width="90px" prop="relationBrotherSister">
            <el-radio-group :disabled="disabled" v-model="form.relationBrotherSister">
              <el-radio :label="'0'">无</el-radio>
              <el-radio :label="'1'">有</el-radio>
            </el-radio-group>
          </el-form-item>
        </div>
        <div class="r mt10">
          <div class="r">
            <el-form-item label="药物" label-width="80px" prop="relationPills">
              <el-radio-group :disabled="disabled" v-model="form.relationPills">
                <el-radio :label="'0'">无</el-radio>
                <el-radio :label="'1'">有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item style="margin-left: 10px" v-show="form.relationPills == '1'" label=""
                          prop="relationPillsHave"
            >
              <el-input :disabled="disabled" style="width: 350px" v-model="form.relationPillsHave"
                        placeholder="请输入关系的药物名称"
              />
            </el-form-item>
            <el-form-item style="margin-left: 20px" label="其他过敏史" label-width="100px" prop="relationAllergyOther">
              <el-radio-group :disabled="disabled" class="mr10" v-model="form.relationAllergyOther">
                <el-radio :label="'0'">无</el-radio>
                <el-radio :label="'1'">有</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item v-show="form.relationAllergyOther == '1'" label="" prop="relationAllergyOtherHave">
              <el-input :disabled="disabled" style="width: 350px" v-model="form.relationAllergyOtherHave"
                        placeholder="请输入其它过敏史名称"
              />
            </el-form-item>
          </div>
        </div>
      </div>
      <!-- 适应证信息 -->
      <div class="border">
        <h4>适应证信息（使用舒血宁注射液（雪乐通）的相关诊断）</h4>
        <el-form-item label="西医诊断" prop="westernMedicineDiagnose" label-width="120">
          <el-checkbox-group :disabled="disabled" v-model="form.westernMedicineDiagnose" style="display: flex">
            <div class="mr10" v-for="item in xiyizhenduan" :key="item.value">
              <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
            </div>
          </el-checkbox-group>
          <el-input
            v-if="form.westernMedicineDiagnose.includes('10')" :disabled="disabled" type="textarea" v-model="form.westernMedicineDiagnoseOther"
                    placeholder="请输入其它，多个用分号隔开"
          />
        </el-form-item>
        <el-form-item label="中医诊断" prop="isHaveTcmDiagnose" label-width="120">
          <el-radio-group :disabled="disabled" v-model="form.isHaveTcmDiagnose">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
          <div class="r" v-show="form.isHaveTcmDiagnose == '1'">
            <el-checkbox-group :disabled="disabled" v-model="form.tcmDiagnose" style="display: flex">
              <div class="mr10" v-for="item in zhongyizhenduan" :key="item.value">
                <el-checkbox :label="item.value">{{ item.label }}</el-checkbox>
              </div>
            </el-checkbox-group>
            <el-input :disabled="disabled" style="width: 200px" v-model="form.tcmDiagnoseOther" placeholder="请输入"/>
          </div>
        </el-form-item>

        <el-form-item label="辩证" prop="isHavaDialectical" label-width="120">
          <el-radio-group :disabled="disabled" class="mr10" v-model="form.isHavaDialectical">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
          <el-input :disabled="disabled" v-show="form.isHavaDialectical == '1'" style="width: 60%"
                    v-model="form.dialecticalDetail" placeholder="请输入"
          />
        </el-form-item>
      </div>
      <!-- 入院诊断西医 -->
      <div class="border">
        <el-form-item label="入院诊断西医" prop="westernAdmittingDiagnose" label-width="160">
          <el-input :disabled="disabled" type="textarea" v-model="form.westernAdmittingDiagnose"
                    placeholder="请输入西医入院诊断，多个用分号隔开"
          />
        </el-form-item>
      </div>
      <!-- 入院诊断中医 -->
      <div class="border">
        <el-form-item label="入院诊断中医" prop="isHaveTcmAdmittingDiagnose" label-width="160">
          <el-radio-group :disabled="disabled" v-model="form.isHaveTcmAdmittingDiagnose">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
          <el-input :disabled="disabled" style="margin-top: 10px" v-show="form.isHaveTcmAdmittingDiagnose == '1'"
                    type="textarea" v-model="form.tcmAdmittingDiagnose" placeholder="请输入中医入院诊断，多个用逗号隔开"
          />
        </el-form-item>

        <el-form-item label="辩证" prop="isHaveAdmittingDialectical" label-width="160">
          <el-radio-group :disabled="disabled" class="mr10" v-model="form.isHaveAdmittingDialectical">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
          <el-input :disabled="disabled" v-show="form.isHaveAdmittingDialectical == '1'" style="width: 60%"
                    v-model="form.admittingDialecticalDetail" placeholder="请输入"
          />
        </el-form-item>
      </div>
      <!-- 舒血宁注射液（雪乐通）使用信息 -->
      <div class="border">
        <h4>舒血宁注射液（雪乐通）使用信息</h4>
        <el-form-item label="本次治疗前是否使用过舒血宁注射液（雪乐通）" prop="isHavaUse">
          <el-radio-group :disabled="disabled" v-model="form.isHavaUse">
            <el-radio :label="'0'">否</el-radio>
            <el-radio :label="'1'">是</el-radio>
            <el-radio :label="'2'">不详</el-radio>
          </el-radio-group>
        </el-form-item>
        <div class="r" style="align-items: center; margin-bottom: 7px;">
          <el-form-item style="width:20%" label="监测期内用药天数" prop="useDays">
            <el-input :disabled="disabled" style="width: 80px; margin: 0 10px" v-model="form.useDays" placeholder=""/>
            天
          </el-form-item>
          <el-form-item style="width:25%" label="首次用药时间" prop="useDays">
            <el-date-picker :disabled="disabled" clearable v-model="form.firstUseDate" type="date"
                            value-format="yyyy-MM-dd" placeholder="请选择首次用药时间"
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item style="width:25%" label="末次用药时间" prop="useDays">
            <el-date-picker :disabled="disabled" clearable v-model="form.lastUseDate" type="date"
                            value-format="yyyy-MM-dd" placeholder="请选择末次用药时间"
            >。
            </el-date-picker>
          </el-form-item>
        </div>
      </div>
      <!-- 每日给药情况表（见续一） -->
      <div class="border">
        <h4>每日给药情况表（见续一）</h4>
        <div style="align-items: center; margin-bottom: 7px">
          <div style="line-height: 30px">
            <span class="mr10" style="font-weight: 700">注</span>溶媒种类*
            1=5%葡萄糖注射液；2=10%葡萄糖注射液；3=0.9%氯化钠注射液；4=注射用水；5=50%葡萄糖注射液；6=葡萄糖氯化钠注射液；7=复方氯化钠注射液；8=乳酸钠林格注射液；9=果糖注射液；
            10=其它（请注明）
          </div>
          <div style="line-height: 20px; margin-left: 25px">
            舒血宁注射液（雪乐通）若与其它药物同瓶使用，则“溶媒种类”选“10=其它”，并注明溶媒和其它药物的通用名称、剂型和用量。如“1+氯化钾注射液
            10ml”、“转化糖注射液+胰岛素 5u”。
            <div style="margin: 10px 0">
              给药途径# 1=静脉滴注；2=静脉注射； 3=肌内注射； 4=理疗； 5=其它（请注明）
            </div>
            N 为超过 14 天用药，记录最后一次用药的情况。
          </div>
        </div>
      </div>
      <!-- 给药期间是否发生不良反应/事件 -->
      <div class="border">
        <el-form-item label="给药期间是否发生不良反应/事件" prop="isHaveBad">
          <el-radio-group :disabled="disabled" v-model="form.isHaveBad">
            <el-radio :label="'0'">无</el-radio>
            <el-radio :label="'1'">有</el-radio>
          </el-radio-group>
          <div style="margin: 0 7px">
            ( 若“有”，请填写 B 表，并根据《药品不良反应报告和监测管理办法》上报网录数据。
            )
          </div>
        </el-form-item>
      </div>

      <!-- A 表 监测信息表（续一） -->
      <div class="border">
        <h4 style="text-align: center">A 表 监测信息表（续一）</h4>
        <el-button @click="lookYaoData" :disabled="disabled"
                   style="background-color: #b8dfea; margin: 0 10px 10px 10px; float: right"
        >给药数据
        </el-button>
        <el-popover title="添加行数" width="300" placement="bottom" v-model="visible">
          <el-input v-model.number="addRowCount" placeholder="请输入行数" style="width: 100%" @input="validateInput(1)"
                    @keydown.enter="confirmAdd(1)"
          ></el-input>
          <template slot="reference">
            <el-button :disabled="disabled"
                       style="background-color: #b8dfea; margin-bottom: 10px; float: right"
            >添加行
            </el-button>
          </template>
          <div style="display: flex; justify-content: space-between; margin-top: 10px">
            <el-button @click="cancelAdd(1)">取消</el-button>
            <el-button type="primary" @click="confirmAdd(1)">确认</el-button>
          </div>
        </el-popover>

        <el-table :border="true" key="electronicExtendOneInfoVoList" :data="form.electronicExtendOneInfoVoList"
                  style="width: 100%" @cell-click="handleCellClick" :cell-class-name="tableRowClassName"
        >
          <el-table-column type="index" fixed="" label="次数" width="80" align="center">
            <template slot-scope="scope">
              <!-- 根据日期判断是否是最后一天 -->
              <span v-if="scope.$index < 14">{{ scope.$index + 1 }}</span>
              <span v-else>
                <!-- 最后一天需要让用户自己编辑 -->
                <el-input v-model="scope.row.count"/>
              </span>
            </template>
          </el-table-column>
          <el-table-column fixed prop="beginTime" label="给药开始时间" align="center" width="260">
            <template slot-scope="scope">
              <el-date-picker :disabled="disabled" v-model="scope.row.beginTime" type="datetime" clearable
                              format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm" placeholder="请选择给药开始时间"
              >
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column prop="batchNo" label="批号" align="center" width="141">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.batchNo"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="placeTime" label="配液放置时间（min）" align="center" width="161">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.placeTime"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="frequency" label="给药频率（次/天" width="151">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.frequency"
              ></el-input>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="singleAmount" label="单次用药量（ml）" width="151">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.singleAmount"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="menstruumType" label="溶媒种类*" width="150" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              <el-select :disabled="disabled" v-model="scope.row.menstruumType" placeholder="请选择">
                <el-option v-for="(option, index) in RMZLoptions" :key="index" :label="option.value"
                           :value="option.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="menstruumTypeOther" label="其它" width="240">
            <template slot-scope="scope">
              <el-input :disabled="isDisabled(scope.row, 1)" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.menstruumTypeOther"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="singleMenstruumAmount" label="单次溶媒剂量（ml）" width="240">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.singleMenstruumAmount"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="giveIllnessPathway" label="给药途径#" width="161" align="center">
            <template slot-scope="scope">
              <el-select :disabled="disabled" v-model="scope.row.giveIllnessPathway" placeholder="请选择">
                <el-option v-for="(option, index) in GYTJ" :key="index" :label="option.value"
                           :value="option.value"
                ></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="giveIllnessPathwayOther" label="其它" width="240">
            <template slot-scope="scope">
              <el-input :disabled="isDisabled(scope.row, 2)" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.giveIllnessPathwayOther"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="quietSpeed" label="静滴速度（滴/min）" align="center" width="120">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.quietSpeed"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="quietContinueTime" label="静滴持续时间（min）" align="center" width="120">
            <template slot-scope="scope">
              <el-input :disabled="disabled" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.quietContinueTime"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130" align="center" fixed="right">
            <template slot-scope="scope">
              <el-button :disabled="disabled" type="text" @click="copyRow(scope.row)">复制</el-button>
              <el-button :disabled="disabled" type="text" size="small"
                         @click="delelectronicExtendOneInfoVoList(scope.row, scope.$index)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 合并用药情况表 -->
      <div class="border">
        <h4>合并用药情况表</h4>
        <div style="align-items: center; margin-bottom: 7px">
          <div style="line-height: 20px">
            <span class="mr10"
                  style="font-weight: 700"
            >注</span>给药途径*1=口服;·2=肌注·3=静滴;·4静推;﹔·5=皮下;·6=泵入﹔·7=舌下﹔·8=外用;·9=腔道，10=吸入﹔‘11=经皮﹔
            12=其它（请注明）
          </div>
          <div style="line-height: 20px;margin-top: 10px;">
            <span class="mr25" style="font-weight: 700"></span>用法#1=qd 2=qn; 3=bid;
            4=tid; 5=qid; 6=qod 7=qw; 其它（请注明）
            <span class="mr10" style="font-weight: 700"></span>研究结束时 △ ·1 =
            继续使用；2 = 停止使用
          </div>
        </div>
      </div>

      <!-- A 表 合并用药情况表（续二） -->
      <div class="border">
        <h4 style="text-align: center">A 表 合并用药情况表（续二）</h4>
        <el-button @click="lookYiZhu" :disabled="disabled"
                   style="background-color: #b8dfea; margin: 0 10px 10px 10px; float: right"
        >选取医嘱
        </el-button>
        <el-popover title="添加行数" width="300" placement="bottom" v-model="visible2">
          <el-input v-model.number="addRowCount2" placeholder="请输入行数" style="width: 100%" @input="validateInput(2)"
                    @keydown.enter="confirmAdd(2)"
          />
          <template slot="reference">
            <el-button :disabled="disabled"
                       style="background-color: #b8dfea; margin-bottom: 10px; float: right"
            >添加行
            </el-button>
          </template>
          <div style="display: flex; justify-content: space-between; margin-top: 10px">
            <el-button @click="cancelAdd(2)">取消</el-button>
            <el-button type="primary" @click="confirmAdd(2)">确认</el-button>
          </div>
        </el-popover>
        <el-table border :show-overflow-tooltip="true" :data="form.electronicExtendTwoInfoVoList"
                  key="electronicExtendTwoInfoVoList" style="width: 100%" @cell-click="handleCellClick2"
                  :cell-class-name="tableRowClassName2"
        >
          <el-table-column type="index" fixed="" label="序号" width="55" align="center">
            <template slot-scope="scope">
              <span>{{ scope.$index + 1 }}</span>
            </template>
          </el-table-column>
          <el-table-column prop="pillsName" fixed label="药品名称（通用名称+剂型）" align="center">
            <template slot-scope="scope">
              <el-input :id="'id2' + scope.row.index + scope.column.index" :disabled="disabled"
                        v-model="scope.row.pillsName"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="givePillsPathway" label="给药途径*">
            <template slot-scope="scope">
              <el-select :disabled="disabled" v-model="scope.row.givePillsPathway" placeholder="请选择">
                <el-option v-for="(option, index) in 12" :key="index" :label="option" :value="option"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="givePillsPathwayOther" label="其它" width="240">
            <template slot-scope="scope">
              <el-input :disabled="isDisabled(scope.row, 3)" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.givePillsPathwayOther"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="pillsUsage" label="用法#" align="center" width="190">
            <template slot-scope="scope">
              <el-select :disabled="disabled" v-model="scope.row.pillsUsage" placeholder="请选择">
                <el-option v-for="(option, index) in 8" :key="index" :label="option" :value="option"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pillsUsageOther" label="其它" width="240">
            <template slot-scope="scope">
              <el-input :disabled="isDisabled(scope.row, 4)" :id="'id1' + scope.row.index + scope.column.index"
                        v-model="scope.row.pillsUsageOther"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="pillsAmount" label="用量" width="100">
            <template slot-scope="scope">
              <el-input :id="'id2' + scope.row.index + scope.column.index" :disabled="disabled"
                        v-model="scope.row.pillsAmount"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="endTime" label="研究结束时△" width="120">
            <template slot-scope="scope">
              <el-select :disabled="disabled" v-model="scope.row.endTime" placeholder="请选择">
                <el-option v-for="(option, index) in 2" :key="index" :label="option" :value="option"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="130" align="center">
            <template slot-scope="scope">
              <el-button :disabled="disabled" type="text" size="small"
                         @click="delelectronicExtendTwoInfoVoList(scope.row, scope.$index)"
              >删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="r" style="justify-content: space-around; margin: 50px 0">
          <div class="r">
            监测员签名：
            <el-input style="width: 200px" :disabled="role.indexOf('monitor') == -1"
                      v-model="form.inspectorSign"
            ></el-input>
          </div>
          <div class="r">
            日期：
            <el-date-picker :disabled="role.indexOf('monitor') == -1" style="width: 200px" clearable
                            v-model="form.inspectorDate" type="date" value-format="yyyy-MM-dd" placeholder="请选择日期"
            />
          </div>
          <div class="r">
            质控员签名：
            <el-input :disabled="role.indexOf('quality2') == -1" style="width: 200px"
                      v-model="form.qualityControllerSign"
            ></el-input>
          </div>
          <div class="r">
            日期：
            <el-date-picker :disabled="role.indexOf('quality2') == -1" style="width: 200px" clearable
                            v-model="form.qualityControllerDate" type="date" value-format="yyyy-MM-dd"
                            placeholder="请选择日期"
            />
          </div>
        </div>

        <div v-if="form.auditStatus == 0" style="margin: 10px auto; text-align: center">
          <div v-if="form.rejectReason">驳回原因：{{ form.rejectReason }}</div>
        </div>

        <div v-if="!$route.query.isLook" style="margin: 50px auto; text-align: center">
          <div v-if="role.indexOf('quality2') == -1">
            <el-button v-if="form.auditStatus != 1" :disabled="disabled" type="primary"
                       @click="savePolicy('0')"
            >保存
            </el-button>
            <el-button v-if="form.auditStatus != 1" :disabled="disabled" type="success" style="margin-left: 50px"
                       @click="savePolicy('1')"
            >提交
            </el-button>
          </div>
          <!-- 同时是质控员  是提交状态 才能审核 -->
          <div v-if="role.indexOf('quality2') != -1 && form.submitStatus != 0">
            <el-button v-if="form.auditStatus != 1" style="margin-left: 50px" type="success"
                       @click="savePolicy(null, '1')"
            >通过
            </el-button>
            <el-button v-if="form.auditStatus != 1" style="margin-left: 50px" type="danger"
                       @click="handleRefuse"
            >驳回
            </el-button>
          </div>
        </div>
      </div>
    </el-form>

    <!-- 审核驳回弹窗 -->
    <el-dialog title="驳回" :visible.sync="refuse" width="50%">
      <div style="margin:10px 0">驳回原因：</div>
      <el-input v-model="refuseReason.reason" type="textarea"></el-input>
      <!-- 底部操作区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleRefuse">取 消</el-button>
        <el-button type="primary" @click="submitRefuse">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 查询续一弹窗 -->
    <el-dialog class="lookFlag" title="给药数据" :visible.sync="lookFlag1" width="70%">
      <el-table v-loading="loading" :data="baseInfoList1" border @selection-change="handleSelectionChange1">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="给药开始时间" align="center" prop="beginTime"/>
        <el-table-column label="溶媒种类" align="center" prop="menstruumType"/>
        <el-table-column label="溶媒种类(其它)" align="center" prop="menstruumTypeOther"/>
        <el-table-column label="单次溶媒剂量(m1)" align="center" prop="singleMenstruumAmount"/>
        <el-table-column label="单次用药量(m1)" align="center" prop="singleAmount"/>
        <el-table-column label="给药途径" align="center" prop="giveIllnessPathway"/>
        <el-table-column label="给药途径(其它)" align="center" prop="giveIllnessPathwayOther"/>
        <el-table-column label="给药频率(次/天)" align="center" prop="frequency"/>
      </el-table>

      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleLookFlag1">取 消</el-button>
        <el-button type="primary" @click="handleSubmit1">确 定</el-button>

      </span>
    </el-dialog>

    <!-- 拉取医嘱弹窗 -->
    <el-dialog class="lookFlag" title="医嘱信息" :visible.sync="lookFlag" width="70%">
      <!-- 表格组件，包含复选框列 -->
      <el-table v-loading="loading" :data="baseInfoList" border @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center"/>
        <el-table-column label="药品名称" align="center" prop="pillsName"/>
        <el-table-column label="用法" align="center" prop="frequency"/>
        <el-table-column label="用量" align="center" prop="amountPer"/>
      </el-table>

      <!-- 底部操作区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancleLookFlag">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  getmonitorOneInfo,
  addmonitorOneInfo,
  getManagerInfo,
  exist,
  monitorOneInfoIDAAA,
  reject,
  GETmedicalRecordNo,
  rejectAAAA
} from '@/api/workstation/managerInfo'
import { medicalOrderscategory } from '@/api/workstation/baseInfo'

export default {
  dicts: ['sys_user_sex'],
  computed: {
    role() {
      return this.$store.state.user.roles
    },
    useInfo() {
      return this.$store.state.user.user
    }
  },
  data() {
    // 年龄校验
    let patter = /^\d{5}$/
    let isNumber = (rule, value, callback) => {
      if (!patter.test(value)) {
        return callback(new Error('请输入5位数字~'))
      } else {
        callback()
      }
    }
    return {
      refuse: false,
      refuseReason: {},
      // 表单参数
      form: {
        allergyShow: [],
        allergySource: [],
        illnessShow: [],
        tcmDiagnose: [], // 中医诊断
        westernMedicineDiagnose: [],
        electronicExtendOneInfoVoList: [{}],
        electronicExtendTwoInfoVoList: [{}]
      },
      // 表单校验
      rules: {
        // monitorRecordNo: [{ validator: isNumber, trigger: "blur" }],
        isHaveAllergy: [{ required: true, message: '请选择个人过敏史', trigger: 'change' }],
        inputFormDate: [{ required: true, message: '请选择入组日期', trigger: 'change' }],
        birthdate: [{ required: true, message: '请选择出生日期', trigger: 'change' }],
        lastUseDate: [{ required: true, message: '请选择末次用药时间', trigger: 'change' }],
        weather: [{ required: true, message: '请输入天气', trigger: 'blur' }],
        temperature: [{ required: true, message: '请输入温度', trigger: 'blur' }],
        patientSex: [{ required: true, message: '请选择性别', trigger: 'change' }],
        phoneNo: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        patientHeight: [{ required: true, message: '请输入身高（cm）', trigger: 'blur' }],
        patientWeight: [{ required: true, message: '请输入体重（kg）', trigger: 'blur' }],
        nation: [{ required: true, message: '请输入民族', trigger: 'blur' }],
        westernAdmittingDiagnose: [{ required: true, message: '请输入入院西医诊断', trigger: 'blur' }],
        useDays: [{ required: true, message: '请输入监测期内用药天数', trigger: 'blur' }],
        isHaveIllness: [{ required: true, message: '请选择', trigger: 'change' }],
        isHaveFamily: [{ required: true, message: '请选择', trigger: 'change' }],
        relationParent: [{ required: true, message: '请选择', trigger: 'change' }],
        westernMedicineDiagnose: [{ required: true, message: '请选择', trigger: 'change' }],
        relationBrotherSister: [{ required: true, message: '请选择', trigger: 'change' }],
        relationPills: [{ required: true, message: '请选择', trigger: 'change' }],
        relationAllergyOther: [{ required: true, message: '请选择', trigger: 'change' }],
        isHaveTcmDiagnose: [{ required: true, message: '请选择', trigger: 'change' }],
        isHavaDialectical: [{ required: true, message: '请选择', trigger: 'change' }],
        isHaveTcmAdmittingDiagnose: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isHaveAdmittingDialectical: [
          { required: true, message: '请选择', trigger: 'change' }
        ],
        isHavaUse: [{ required: true, message: '请选择', trigger: 'change' }],
        isHaveBad: [{ required: true, message: '请选择', trigger: 'change' }]
      },
      // 按钮loading
      buttonLoading: false,
      loading: true,
      errormsg1: '',
      guominyuan: [
        { value: '1', label: '食物' },
        { value: '2', label: '药物' },
        { value: '3', label: '不明原因过敏原' },
        { value: '4', label: '其他' }
      ],
      guominbiaoxian: [
        { value: '1', label: '过敏性休克' },
        { value: '2', label: '喉水肿' },
        { value: '3', label: '支气管痉挛' },
        { value: '4', label: '皮疹' },
        { value: '5', label: '瘙痒' },
        { value: '6', label: '腹痛' },
        { value: '7', label: '恶心' },
        { value: '8', label: '呕吐' },
        { value: '9', label: '腹泻' },
        { value: '10', label: '便秘' },
        { value: '11', label: '其他' }
      ],
      guominxingjibingshi: [
        { value: '1', label: '过敏性鼻炎' },
        { value: '2', label: '过敏性哮喘' },
        { value: '3', label: '湿疹' },
        { value: '4', label: '不明原因皮肤风团' },
        { value: '5', label: '其他' }
      ],
      xiyizhenduan: [
        { value: '1', label: '脑梗死' },
        { value: '2', label: '冠心病' },
        { value: '3', label: '短暂性脑缺血发作' },
        { value: '4', label: '椎基底动脉供血不足' },
        { value: '5', label: '高血压' },
        { value: '6', label: '大脑动脉粥样硬化症' },
        { value: '7', label: '偏头痛' },
        { value: '8', label: '神经性头疼' },
        { value: '9', label: '颈椎病' },
        { value: '10', label: '其它' }
      ],
      zhongyizhenduan: [
        { value: '1', label: '中风' },
        { value: '2', label: '胸痹' },
        { value: '3', label: '其它' }
      ],
      RMZLoptions: [
        { label: '1=5%葡萄糖注射液', value: '1' },
        { label: '2=10%葡萄糖注射液', value: '2' },
        { label: '3=0.9%氯化钠注射液', value: '3' },
        { label: '4=注射用水', value: '4' },
        { label: '5=50%葡萄糖注射液', value: '5' },
        { label: '6=葡萄糖氯化钠注射液', value: '6' },
        { label: '7=复方氯化钠注射液', value: '7' },
        { label: '8=乳酸钠林格注射液', value: '8' },
        { label: '9=果糖注射液', value: '9' },
        { label: '10=其它（请注明）', value: '10' }
      ],
      GYTJ: [
        { label: '1=静脉滴注', value: '1' },
        { label: '2=静脉注射', value: '2' },
        { label: '3=肌内注射', value: '3' },
        { label: '4=理疗', value: '4' },
        { label: '5=其它（请注明）', value: '5' }
      ],
      addRowCount: null, // 使用 null 来表示初始值为空
      visible: false,
      addRowCount2: null, // 使用 null 来表示初始值为空
      visible2: false,
      isHaveData: false,
      shouldSave: true, // 是否保存
      medicalRecodeNo: '', // 流水号
      ID: '', // 流水号
      currentClickEl: '',
      maxColumnIndex: '',
      currentClickEl2: '',
      maxColumnIndex2: '',
      baseInfoList: [], // 医嘱药品名称列表
      lookFlag: false, // 医嘱弹窗开关
      yizhuList: [], // 医嘱列表
      baseInfoList1: [], // 医嘱药品名称列表
      lookFlag1: false, // 医嘱弹窗开关
      yizhuList1: [], // 医嘱列表
      disabled: false // 是否是查看
    }
  },
  mounted() {
    this.loading = false
  },
  methods: {
    isDisabled(row, type) {
      if (this.disabled) {
        return true
      }
      switch (type) {
        case 1:
          return row.menstruumType !== '10'
        case 2:
          return row.giveIllnessPathway !== '5'
        case 3:
          return row.givePillsPathway != 12
        case 4:
          return row.pillsUsage != 8
        default:
          return false
      }
    },
    //驳回
    handleRefuse() {
      this.refuse = true
      this.refuseReason.id = this.form.id
    },
    cancleRefuse() {
      this.refuseReason = {}
      this.refuse = false
    },
    submitRefuse() {
      this.form.rejectReason = this.refuseReason.reason
      this.form.allergySource = Array.isArray(this.form.allergySource)
        ? this.form.allergySource.join(',')
        : ''
      this.form.allergyShow = Array.isArray(this.form.allergyShow)
        ? this.form.allergyShow.join(',')
        : ''
      this.form.illnessShow = Array.isArray(this.form.illnessShow)
        ? this.form.illnessShow.join(',')
        : ''
      this.form.westernMedicineDiagnose = Array.isArray(this.form.westernMedicineDiagnose)
        ? this.form.westernMedicineDiagnose.join(',')
        : ''
      this.form.tcmDiagnose = Array.isArray(this.form.tcmDiagnose)
        ? this.form.tcmDiagnose.join(',')
        : ''
      this.form.electronicExtendOneInfoBoList = this.form.electronicExtendOneInfoVoList
        .length
        ? this.form.electronicExtendOneInfoVoList
        : []
      this.form.electronicExtendTwoInfoBoList = this.form.electronicExtendTwoInfoVoList
        .length
        ? this.form.electronicExtendTwoInfoVoList
        : []
      rejectAAAA(this.form).then(res => {
        this.$modal.msgSuccess('驳回成功')
        this.cancleRefuse()
      })
    },
    tableRowClassName({ row, column, rowIndex, columnIndex }) {
      this.maxColumnIndex = columnIndex //获取表格的列数
      row.index = rowIndex
      column.index = columnIndex
    },
    handleCellClick(row, column) {
      let activeElement = document.activeElement.nodeName.toLocaleLowerCase() //当前获取焦点的元素
      //只有Input才有焦点事件
      if (activeElement == 'input') {
        //当前获取焦点的元素，属于表格的第几行的第几个元素
        this.currentClickEl = {
          rowIndex: row.index,
          columnIndex: column.index
        }
        this.keyDown()
      } else {
        this.currentClickEl = null
      }
    },
    //添加键盘事件  得到上下左右键的点击；取消tab键的默认行为
    keyDown() {
      let that = this
      document.onkeydown = (e) => {
        let el = e || e.event || window.enevt || arguments.callee.callee.arguments[0]
        if (!that.currentClickEl) return
        //上键
        if (el && el.key == 'ArrowUp') {
          that.getIdByIndex('row', -1)
        }
        //下
        if (el && el.key == 'ArrowDown') {
          that.getIdByIndex('row', 1)
        }
        //左
        if (el && el.key == 'ArrowLeft') {
          that.getIdByIndex('column', -1)
        }
        //右
        if (el && el.key == 'ArrowRight') {
          that.getIdByIndex('column', 1)
        }
        if (el && el.key == 'Tab') {
          el.preventDefault() //阻止默认行为
        }
      }
    },
    //判断：上键的时候：行的Index减1，到0停止
    //判断：下键的时候：行的Index加1，到表格的最后一行停止；表格的最后一行取决于表格数据的数组
    //判断：左键的时候：列的index减1，到index=0停止
    //判断：右键的时候：列的index加1，到表格的最大列数停止
    //给input框赋值动态id，获取到这个id；给这个元素获取焦点
    //判断：当前的元素是不是input框，表格里面判断是不是都是输入框，不是的时候跳到下一个输入框
    getIdByIndex(type, num) {
      let that = this
      if (type == 'row') {
        if (
          num > 0 &&
          that.currentClickEl.rowIndex ==
          that.form.electronicExtendOneInfoVoList.length - 1
        ) {
          return
        }
        if (num < 0 && that.currentClickEl.rowIndex == 0) return
        that.currentClickEl.rowIndex = Number(that.currentClickEl.rowIndex) + num
      } else {
        if (num < 0 && that.currentClickEl.columnIndex == 0) {
          that.currentClickEl.columnIndex = 1
          return
        }
        if (num > 0 && that.currentClickEl.columnIndex == that.maxColumnIndex) return
        that.currentClickEl.columnIndex = Number(that.currentClickEl.columnIndex) + num
      }
      let newId =
        'id1' + String(that.currentClickEl.rowIndex) + that.currentClickEl.columnIndex
      if (!document.getElementById(newId)) {
        that.getIdByIndex(type, num)
        return
      }
      if (!newId) return
      setTimeout(() => {
        document.getElementById(newId).focus()
      }, 50)
    },

    tableRowClassName2({ row, column, rowIndex, columnIndex }) {
      this.maxColumnIndex2 = columnIndex //获取表格的列数
      row.index = rowIndex
      column.index = columnIndex
    },
    handleCellClick2(row, column) {
      let activeElement = document.activeElement.nodeName.toLocaleLowerCase() //当前获取焦点的元素
      //只有Input才有焦点事件
      if (activeElement == 'input') {
        //当前获取焦点的元素，属于表格的第几行的第几个元素
        this.currentClickEl2 = {
          rowIndex: row.index,
          columnIndex: column.index
        }
        this.keyDown2()
      } else {
        this.currentClickEl2 = null
      }
    },
    //添加键盘事件  得到上下左右键的点击；取消tab键的默认行为
    keyDown2() {
      let that = this
      document.onkeydown = (e) => {
        let el = e || e.event || window.enevt || arguments.callee.callee.arguments[0]
        if (!that.currentClickEl2) return
        //上键
        if (el && el.key == 'ArrowUp') {
          that.getIdByIndex2('row', -1)
        }
        //下
        if (el && el.key == 'ArrowDown') {
          that.getIdByIndex2('row', 1)
        }
        //左
        if (el && el.key == 'ArrowLeft') {
          that.getIdByIndex2('column', -1)
        }
        //右
        if (el && el.key == 'ArrowRight') {
          that.getIdByIndex2('column', 1)
        }
        if (el && el.key == 'Tab') {
          el.preventDefault() //阻止默认行为
        }
      }
    },
    getIdByIndex2(type, num) {
      let that = this
      if (type == 'row') {
        if (
          num > 0 &&
          that.currentClickEl2.rowIndex ==
          that.form.electronicExtendTwoInfoVoList.length - 1
        ) {
          return
        }
        if (num < 0 && that.currentClickEl2.rowIndex == 0) return
        that.currentClickEl2.rowIndex = Number(that.currentClickEl2.rowIndex) + num
      } else {
        if (num < 0 && that.currentClickEl2.columnIndex == 0) {
          that.currentClickEl2.columnIndex = 1
          return
        }
        if (num > 0 && that.currentClickEl2.columnIndex == that.maxColumnIndex) return
        that.currentClickEl2.columnIndex = Number(that.currentClickEl2.columnIndex) + num
      }
      let newId =
        'id2' + String(that.currentClickEl2.rowIndex) + that.currentClickEl2.columnIndex
      if (!document.getElementById(newId)) {
        that.getIdByIndex(type, num)
        return
      }
      if (!newId) return
      setTimeout(() => {
        document.getElementById(newId).focus()
      }, 50)
    },
    async lookYaoData() {
      try {
        const { data } = await GETmedicalRecordNo(this.$route.query.medicalRecordNo ? this.$route.query.medicalRecordNo : this.form?.medicalRecordNo)
        this.baseInfoList1 = data || []
        this.lookFlag1 = true
      } catch (error) {
        console.error(error)
      }
    },
    // 多选框选中数据
    handleSelectionChange1(selection) {
      this.yizhuList1 = selection
    },
    cancleLookFlag1() {
      this.lookFlag1 = false
      this.yizhuList1 = []
    },
    handleSubmit1() {
      this.yizhuList1.forEach((item) => {
        this.form.electronicExtendOneInfoVoList.push({
          beginTime: item.beginTime, // 药品名称
          menstruumType: item.menstruumType, //
          menstruumTypeOther: item.menstruumTypeOther, //
          singleMenstruumAmount: item.singleMenstruumAmount, //
          singleAmount: item.singleAmount, //
          giveIllnessPathway: item.giveIllnessPathway, //
          giveIllnessPathwayOther: item.giveIllnessPathwayOther, //
          frequency: item.frequency //
        })
      })
      this.cancleLookFlag1()
    },
    async lookYiZhu() {
      try {
        const [res1, res2] = await Promise.all([
          medicalOrderscategory(this.$route.query.medicalRecordNo ? this.$route.query.medicalRecordNo : this.form?.medicalRecordNo, 1),
          medicalOrderscategory(this.$route.query.medicalRecordNo ? this.$route.query.medicalRecordNo : this.form?.medicalRecordNo, 2)
        ])
        const data1 = res1 && res1.data ? res1.data : []
        const data2 = res2 && res2.data ? res2.data : []
        this.baseInfoList = [...data1, ...data2]
        this.lookFlag = true
      } catch (error) {
        console.error(error)
      }
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.yizhuList = selection
    },
    cancleLookFlag() {
      this.lookFlag = false
      this.yizhuList = []
    },
    handleSubmit() {
      this.yizhuList.forEach((item) => {
        this.form.electronicExtendTwoInfoVoList.push({
          pillsName: item.pillsName, // 药品名称
          // pillsUsage: item.frequency, // 用法用量
          pillsAmount: item.amountPer // 单次剂量
        })
      })
      this.cancleLookFlag()
    },
    querySearch(queryString, cb) {
      let results = []
      if (!queryString) {
        this.baseInfoList.forEach((item) => {
          results.push({
            value: item.pillsName,
            pillsUsage: item.pillsUsage, // 用法用量
            amountPer: item.amountPer // 单次剂量
          })
        })
        cb(results)
      } else {
        results = this.baseInfoList.filter(this.createFilter(queryString))
        // console.log(results);
        results = results.map((item) => {
          return {
            value: item.pillsName,
            pillsUsage: item.pillsUsage, // 用法用量
            amountPer: item.amountPer // 单次剂量
          }
        })
        cb(results)
      }
    },
    createFilter(queryString) {
      return (item) => {
        // return (item.pillsName.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        return item.pillsName.toLowerCase().includes(queryString.toLowerCase())
      }
    },
    //点击出现搜索后点击的每一项
    handleSelect(item, index) {
      // console.log(item, index);
      this.form.electronicExtendTwoInfoVoList[index].pillsUsage = item.pillsUsage // 用法用量
      this.form.electronicExtendTwoInfoVoList[index].pillsAmount = item.amountPer // 单次剂量
    },
    quchong(allergyShow) {
      // 使用逗号分割字符串，并过滤空字符串
      const array = allergyShow.split(',').filter((item) => item.trim() !== '')
      // 使用 Set 数据结构进行去重
      const uniqueArray = [...new Set(array)]
      return uniqueArray
    },
    // 获取表单数据
    getDataInfo(id, medicalRecordNo, isLook) {
      // 这里是从监测表管理查看和编辑跳转过来的
      if (id) {
        this.id = id
        getManagerInfo(id).then(async({ data }) => {
          this.disabled = data.submitstatus == '1'
          // 判断是否禁用流水号框
          if (isLook) {
            this.disabled = true
            this.isHaveData = true
          } else {
            if (data.monitorRecordNo) {
              this.isHaveData = true
            } else {
              if (this.role.includes('quality2')) {
                this.isHaveData = false
              } else {
                this.isHaveData = true
              }
            }
          }
          await this.handleData(data)
          data.medicalRecordNo = data.medicalRecordNo
            ? data.medicalRecordNo
            : medicalRecordNo
          this.form = data
        })
      } else if (this.$route.query.aId) {
        // 这里是从A表管理跳转过来的
        monitorOneInfoIDAAA(this.$route.query.aId).then(async({ data }) => {
          this.disabled = data.submitstatus == '1'
          // 判断是否禁用流水号框
          if (this.$route.query.isLook) {
            this.disabled = true
            this.isHaveData = true
          } else {
            if (data.monitorRecordNo) {
              this.isHaveData = true
            } else {
              if (this.role.includes('quality2')) {
                this.isHaveData = false
              } else {
                this.isHaveData = true
              }
            }
          }
          this.disabled = this.role.indexOf('quality2') != '-1' ? true : false
          await this.handleData(data)
          if (!this.form.medicalRecordNo) {
            this.form.medicalRecordNo = this.$route.query.medicalRecordNo || medicalRecordNo
          }
          this.form = data
        })
      } else {
        this.medicalRecodeNo = this.$route.query.medicalRecordNo || medicalRecordNo
        getmonitorOneInfo(this.$route.query.medicalRecordNo || medicalRecordNo).then(async({ data }) => {
          // 判断是否禁用流水号框
          if (data.monitorRecordNo) {
            this.isHaveData = true
          } else {
            if (this.role.includes('quality2')) {
              this.isHaveData = false
            } else {
              this.isHaveData = true
            }
          }
          // 检查是否具有 'quality2' 角色 或者 data.submitstatus 为 '1'，设置 this.disabled
          this.disabled = this.role.includes('quality2') || data.submitStatus == '1'
          await this.handleData(data)
          this.form = data
          if (!this.form.medicalRecordNo) {
            this.form.medicalRecordNo = this.$route.query.medicalRecordNo || medicalRecordNo
          }
        })
      }
    },
    handleData(data) {
      // console.log(this.useInfo.nickName);
      data.qualityControllerSign = data.qualityControllerSign ? data.qualityControllerSign : this.role.indexOf('quality2') !== -1 ? this.useInfo.nickName : '' // 质控员
      data.inspectorSign = data.inspectorSign ? data.inspectorSign : this.role.indexOf('monitor') !== -1 ? this.useInfo.nickName : '' // 监测员
      data.isHaveAllergy = data.isHaveAllergy ? data.isHaveAllergy : '0'
      data.isHaveIllness = data.isHaveIllness ? data.isHaveIllness : '0'
      data.isHaveFamily = data.isHaveFamily ? data.isHaveFamily : '0'
      data.relationParent = data.relationParent ? data.relationParent : '0'
      data.relationBrotherSister = data.relationBrotherSister ? data.relationBrotherSister : '0'
      data.relationPills = data.relationPills ? data.relationPills : '0'
      data.relationAllergyOther = data.relationAllergyOther ? data.relationAllergyOther : '0'
      data.isHaveTcmDiagnose = data.isHaveTcmDiagnose ? data.isHaveTcmDiagnose : '0'
      data.isHavaDialectical = data.isHavaDialectical ? data.isHavaDialectical : '0'
      data.isHaveTcmAdmittingDiagnose = data.isHaveTcmAdmittingDiagnose ? data.isHaveTcmAdmittingDiagnose : '0'
      data.isHaveAdmittingDialectical = data.isHaveAdmittingDialectical ? data.isHaveAdmittingDialectical : '0'
      data.isHavaUse = data.isHavaUse ? data.isHavaUse : '0'
      data.isHaveBad = data.isHaveBad ? data.isHaveBad : '0'
      data.allergySource = data.allergySource ? this.quchong(data.allergySource) : [] // 过敏源
      data.allergyShow = data.allergyShow ? this.quchong(data.allergyShow) : [] // 过敏表现
      data.illnessShow = data.illnessShow ? this.quchong(data.illnessShow) : [] // 过敏性疾病表现
      data.westernMedicineDiagnose = data.westernMedicineDiagnose
        ? this.quchong(data.westernMedicineDiagnose)
        : [] // 西医诊断
      data.tcmDiagnose = data.tcmDiagnose ? this.quchong(data.tcmDiagnose) : [] // 中医诊断
      data.electronicExtendOneInfoVoList = data.electronicExtendOneInfoVoList
        ? data.electronicExtendOneInfoVoList
        : []
      data.electronicExtendTwoInfoVoList = data.electronicExtendTwoInfoVoList
        ? data.electronicExtendTwoInfoVoList
        : []
      // 不同的医院不同，咱们医院是医院编号：01，监测医院：d1InlBPaNdozRdbq
      data.hospitalNo = 'yF22RwXQjF8vgXx7'
      data.hospitalName = 'd1InlBPaNdozRdbq'
      data.branchCenter = '2Hz9p5iRco4oTLKw'
    },
    // 保存表单
    async savePolicy(type, num) {
      // 0是保存 1是提交
      if (type == 1) {
        this.$refs['form'].validate(async(valid) => {
          if (valid) {
            // 校验流水号 是否存在
            if (!this.isHaveData && !this.form.monitorRecordNo) {
              return this.$message.error('请输入监测表流水号后再试~')
            }
            if (!this.isHaveData && this.form.monitorRecordNo) {
              const value = this.form.monitorRecordNo.trim() // 获取输入框的值，并去除空格
              let reg = /^\d{5}$/ // 正则表达式，匹配5位数字
              if (!reg.test(value)) {
                // 如果输入的值不符合要求，则清空输入框
                this.errormsg1 = '请输入5位数字~'
                this.$message.error('监测表流水号请输入5位数字~')
                this.form.monitorRecordNo = ''
                return
              } else {
                this.errormsg1 = ''
              }
              let res = await exist(this.form.monitorRecordNo)
              // true 不存在  false 存在
              if (res.data == false) {
                this.$message({
                  message: '监测表流水号已存在，请修改后再试！',
                  type: 'error'
                })
                this.form.monitorRecordNo = ''
                return // 如果监测表流水号已存在，则直接返回
              }
            }
            if (num) {
              this.form.auditStatus = num
            }
            this.form.submitStatus = type   // 提交状态(0暂存 1提交)
            this.form.medicalRecordNo = this.form.medicalRecordNo
              ? this.form.medicalRecordNo
              : this.$route.query.medicalRecordNo
            this.form.allergySource = Array.isArray(this.form.allergySource)
              ? this.form.allergySource.join(',')
              : ''
            this.form.allergyShow = Array.isArray(this.form.allergyShow)
              ? this.form.allergyShow.join(',')
              : ''
            this.form.illnessShow = Array.isArray(this.form.illnessShow)
              ? this.form.illnessShow.join(',')
              : ''
            this.form.westernMedicineDiagnose = Array.isArray(this.form.westernMedicineDiagnose)
              ? this.form.westernMedicineDiagnose.join(',')
              : ''
            this.form.tcmDiagnose = Array.isArray(this.form.tcmDiagnose)
              ? this.form.tcmDiagnose.join(',')
              : ''
            this.form.electronicExtendOneInfoBoList = this.form.electronicExtendOneInfoVoList
              .length
              ? this.form.electronicExtendOneInfoVoList
              : []
            this.form.electronicExtendTwoInfoBoList = this.form.electronicExtendTwoInfoVoList
              .length
              ? this.form.electronicExtendTwoInfoVoList
              : []
            addmonitorOneInfo(this.form).then((res) => {
              if (res.code == 200) {
                this.getDataInfo() // 刷新页面
                const message = this.form.submitStatus == 0 ? '保存成功' : '提交成功'
                this.$message.success(message)
              } else {
                this.$message.error('保存失败')
              }
            })
          } else {
            this.$message.error('信息不完整，无法保存（提交），请完善！')
          }
        })
      } else {
        // 校验流水号 是否存在
        if (!this.isHaveData && !this.form.monitorRecordNo) {
          return this.$message.error('请输入监测表流水号后再试~')
        }
        if (!this.isHaveData && this.form.monitorRecordNo) {
          const value = this.form.monitorRecordNo.trim() // 获取输入框的值，并去除空格
          let reg = /^\d{5}$/ // 正则表达式，匹配5位数字
          if (!reg.test(value)) {
            // 如果输入的值不符合要求，则清空输入框
            this.errormsg1 = '请输入5位数字~'
            this.$message.error('监测表流水号请输入5位数字~')
            this.form.monitorRecordNo = ''
            return
          } else {
            this.errormsg1 = ''
          }
          let res = await exist(this.form.monitorRecordNo)
          // true 不存在  false 存在
          if (res.data == false) {
            this.$message({
              message: '监测表流水号已存在，请修改后再试！',
              type: 'error'
            })
            this.form.monitorRecordNo = ''
            return // 如果监测表流水号已存在，则直接返回
          }
        }
        if (num) {
          this.form.auditStatus = num
        }
        this.form.submitStatus = type   // 提交状态(0暂存 1提交)
        this.form.medicalRecordNo = this.form.medicalRecordNo
          ? this.form.medicalRecordNo
          : this.$route.query.medicalRecordNo
        this.form.allergySource = Array.isArray(this.form.allergySource)
          ? this.form.allergySource.join(',')
          : ''
        this.form.allergyShow = Array.isArray(this.form.allergyShow)
          ? this.form.allergyShow.join(',')
          : ''
        this.form.illnessShow = Array.isArray(this.form.illnessShow)
          ? this.form.illnessShow.join(',')
          : ''
        this.form.westernMedicineDiagnose = Array.isArray(this.form.westernMedicineDiagnose)
          ? this.form.westernMedicineDiagnose.join(',')
          : ''
        this.form.tcmDiagnose = Array.isArray(this.form.tcmDiagnose)
          ? this.form.tcmDiagnose.join(',')
          : ''
        this.form.electronicExtendOneInfoBoList = this.form.electronicExtendOneInfoVoList
          .length
          ? this.form.electronicExtendOneInfoVoList
          : []
        this.form.electronicExtendTwoInfoBoList = this.form.electronicExtendTwoInfoVoList
          .length
          ? this.form.electronicExtendTwoInfoVoList
          : []
        addmonitorOneInfo(this.form).then((res) => {
          if (res.code == 200) {
            this.getDataInfo(this.id, this.medicalRecodeNo) // 刷新页面
            const message = this.form.submitStatus == 0 ? '保存成功' : '提交成功'
            this.$message.success(message)
          } else {
            this.$message.error('保存失败')
          }
        })
      }
    },
    cancel() {
      this.$message.info('已取消操作')
    },
    // 既往病史用药汇总 删除一行
    delelectronicExtendOneInfoVoList(row, index) {
      this.form.electronicExtendOneInfoVoList.splice(index, 1)
    },
    copyRow(row) {
      // 1. 复制当前行的数据，删除 id 属性
      const newRow = { ...row }
      delete newRow.id
      // 2. 插入复制后的数据到数组中的下一个位置
      const index = this.form.electronicExtendOneInfoVoList.indexOf(row)
      this.form.electronicExtendOneInfoVoList.splice(index + 1, 0, newRow)
    },
    validateInput(type) {
      if (type == 1) {
        this.addRowCount = this.addRowCount.replace(/[^\d]/g, '')
      } else {
        this.addRowCount2 = this.addRowCount2.replace(/[^\d]/g, '')
      }
    },
    confirmAdd(type) {
      if (type == 1) {
        const rowCount = parseInt(this.addRowCount)
        if (!isNaN(rowCount) && rowCount > 0 && rowCount < 21) {
          for (let i = 0; i < rowCount; i++) {
            this.form.electronicExtendOneInfoVoList.push({})
          }
          this.$refs.popover && (this.$refs.popover.visible = false)
          this.addRowCount = null
          this.visible = false
        } else {
          this.$message.error('请输入0-20之间的正整数！')
          this.addRowCount = null
        }
      } else {
        const rowCount = parseInt(this.addRowCount2)
        if (!isNaN(rowCount) && rowCount > 0 && rowCount < 21) {
          for (let i = 0; i < rowCount; i++) {
            this.form.electronicExtendTwoInfoVoList.push({})
          }
          this.$refs.popover && (this.$refs.popover.visible2 = false)
          this.addRowCount2 = null
          this.visible2 = false
        } else {
          this.$message.error('请输入0-20之间的正整数！')
          this.addRowCount2 = null
        }
      }
    },
    cancelAdd(type) {
      if (type == 1) {
        this.visible = false
        this.addRowCount = null
      } else {
        this.visible2 = false
        this.addRowCount2 = null
      }
    },
    // 现病史用药汇总 删除一行
    delelectronicExtendTwoInfoVoList(row, index) {
      this.form.electronicExtendTwoInfoVoList.splice(index, 1)
    }
  }
}
</script>

<style lang="scss" scoped>
.border {
  border: 1px solid #ebeef5;
  padding: 10px;
  margin-bottom: 20px;
}

h4 {
  font-weight: 900;
}

.df {
  display: flex;
  align-items: center;
}

.lookFlag {
  ::v-deep .el-dialog__body {
    max-height: 75vh;
    overflow-y: scroll;
  }
}
</style>
